<template>
  <div>
      <div style="display: flex;justify-content: center;margin-top: 10px">
        <el-input v-model="keyword" placeholder="通过用户名搜索..." prefix-icon="el-icon-search" size="small" 
            @keydown.enter.native="selectKeyword()" style="width: 400px; margin-right: 10px"></el-input>
        <el-button type="primary" prefix-icon="el-icon-search" size="small" @click="selectKeyword()">搜索</el-button>
      </div>
      <div class="admin-container">
          <el-card class="box-card" v-for="(admin,index) in admins" :key="index">
            <div slot="header" class="clearfix">
              <span>{{admin.name}}</span>
              <el-button style="float: right; padding: 3px 0;color: red" type="text" icon="el-icon-delete" @click="deleteAdmin(admin)"></el-button>
            </div>
            <div class="img-container">
              <img :src="admin.userFace" :alt="admin.name" :title="admin.name" class="userFace-img">
            </div>
            <div class="userInfo-container">
              <div>用户名: {{admin.name}}</div>
              <div>手机号码: {{admin.phone}}</div>
              <div>电话号码: {{admin.telephone}}</div>
              <div>地址: {{admin.address}}</div>
              <div>用户状态: 
                <el-switch
                  v-model="admin.enabled"
                  @change="changeAdmin(admin)"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="启用"
                  inactive-text="禁用">
                </el-switch>
              </div>
              <div>用户角色:
                <el-tag type="success" v-for="(role,index) in admin.troles" :key="index">
                  {{role.nameZh}}
                </el-tag>
                  <el-popover
                    placement="right"
                    title="角色列表"
                    @show="showAllRoles(admin)"
                    @hide="hideSelectedRoles(admin)"
                    width="210"
                    trigger="click">
                    <el-select v-model="selectedRoles" multiple  placeholder="请选择">
                      <el-option
                        v-for="(item,index) in roles"
                        :key="index"
                        :label="item.nameZh"
                        :value="item.id">
                      </el-option>
                    </el-select>
                    <el-button  slot="reference" type="text" icon="el-icon-more"></el-button>
                  </el-popover>
              </div>
              <div>
                备注: {{admin.remark}}
              </div>
            </div>
          </el-card>
      </div>
  </div>
</template>

<script>
export default {
    name: "sysAdmin",
    data(){
      return{
        admins:[],
        keyword:"",
        roles:[],
        selectedRoles:[],
      }
    },
    created(){
      this.initAdmins();
    },
    methods:{
      hideSelectedRoles(admin){

        var flag = false;
        var rolesId = [];
        var selectedRole = this.selectedRoles;
        if(selectedRole.length != admin.troles.length){
          flag = true
        }else {
          for(var i =0;i<admin.troles.length;i++){
            rolesId.push(admin.troles[i].id);
          }
          if(rolesId.sort().toString() != selectedRole.sort().toString()){
            flag =true;
          } 
        }
        if(flag){
          var data = "?adminId="+admin.id;
          for(var i=0;i<this.selectedRoles.length;i++){
            data += "&rids="+this.selectedRoles[i];
          }
          this.$put("/system/admin/role/"+data).then(res => {
            if(res){
              this.initAdmins();
            }
          })
        }
      },
      showAllRoles(admin){
        this.ininRoles();
        var roles = admin.troles;
        this.selectedRoles = [];
        roles.forEach(r => {
          this.selectedRoles.push(r.id);
        });
      },
      ininRoles(){
        this.$get("/system/admin/role").then(res => {
          if(res){
            this.roles = res;
          }
        })
      },
      changeAdmin(admin){
        this.$put("/system/admin/",admin).then(res => {
          if(res){
            this.initAdmins();
          }
        })
      },
      deleteAdmin(admin){
        this.$confirm(
            "此操作将永久删除该[" + admin.name + "]操作员, 是否继续?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              this.$deletefn("/system/admin/"+admin.id).then(res => {
                if(res){
                  this.initAdmins();
                }
              })
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
      },
      selectKeyword(){
        this.initAdmins();
      },
      initAdmins(){
        this.$get("/system/admin/?keyword="+this.keyword).then(res => {
          if(res){
            console.log(res);
            this.admins = res;
          }
        })
      }
    },
}
</script>

<style>
    .admin-container{
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      margin-top: 10px
    }
    .box-card{
      width: 350px;
      margin-bottom: 20px;
      margin-right: 80px;
    }
    .userFace-img{
      width: 72px;
      height: 72px;
      border-radius: 72px;
    }
    .userInfo-container{
      font-size: 12px;
      color: #409eff;
    }
    .img-container{
      width: 100%;
      display: flex;
      justify-content: center;
    }
</style>